<template>
	<view class="main">
		<view class="header">
			<!-- <button class="back-button" @click="goBack">返回</button> -->
			<text class="header-title">通知详情</text>
		</view>
		<view class="notice-content">
			<view class="notice-title">{{ title }}</view>
			<view class="notice-time">{{time }}</view>
			<view class="notice-detail">{{ details }}</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
	import {
		useRouter
	} from "vue-router";
	import {
		useNoticeStore
	} from "../../../stores/notice";
	const {
		time,
		title,
		preview,
		details
	} = useNoticeStore()

	const router = useRouter();
</script>

<style>
	.main {
		min-height: 100vh;
		background-color: rgb(238, 238, 238);
		padding: 2vw;
	}

	.header {
		display: flex;
		align-items: center;
		margin-bottom: 2vw;
	}

	.back-button {
		margin-right: 10px;
		padding: 5px 10px;
		background-color: #007aff;
		color: #fff;
		border: none;
		border-radius: 5px;
	}

	.header-title {
		font-size: 18px;
		font-weight: bold;
	}

	.notice-content {
		background-color: #fff;
		padding: 2vw;
		border-radius: 5px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	}

	.notice-title {
		font-size: 20px;
		font-weight: bold;
		margin-bottom: 1vw;
	}

	.notice-time {
		font-size: 14px;
		color: #999;
		margin-bottom: 2vw;
	}

	.notice-detail {
		font-size: 16px;
		line-height: 1.5;
	}
</style>